import React from "react";
import { AIModelTagsConstant, getSupportedFeatures } from "../enum";
import type { AiModelResponse } from "../services/chat/geiAiModel";

/**
 * 功能标签类型定义，包含颜色和图标信息
 */
interface TagStyle {
  bgColor: string;
  textColor: string;
  icon?: React.ReactNode;
}

/**
 * 标签样式映射
 */
const tagStyles: Record<string, TagStyle> = {
  深度思考: {
    bgColor: "bg-indigo-100",
    textColor: "text-indigo-800",
    icon: <span className="mr-1">🧠</span>,
  },
  文本对话: {
    bgColor: "bg-green-100",
    textColor: "text-green-800",
    icon: <span className="mr-1">💬</span>,
  },
  联网: {
    bgColor: "bg-blue-100",
    textColor: "text-blue-800",
    icon: <span className="mr-1">🌐</span>,
  },
  多模态: {
    bgColor: "bg-purple-100",
    textColor: "text-purple-800",
    icon: <span className="mr-1">📊</span>,
  },
  图像分析: {
    bgColor: "bg-pink-100",
    textColor: "text-pink-800",
    icon: <span className="mr-1">🔍</span>,
  },
};

interface ModelFeatureTagsProps {
  model: AiModelResponse;
  className?: string;
}

/**
 * 模型功能标签组件
 *
 * @description 根据模型的tags值，以Twitter风格显示该模型支持的所有功能标签
 */
export const ModelFeatureTags: React.FC<ModelFeatureTagsProps> = ({
  model,
  className = "",
}) => {
  // 获取模型支持的功能标签
  const supportedFeatures = getSupportedFeatures(model.tags);

  if (!supportedFeatures.length) {
    return null;
  }

  return (
    <div className={`flex flex-wrap gap-2 ${className}`}>
      {supportedFeatures.map((feature) => {
        const style = tagStyles[feature] || {
          bgColor: "bg-gray-100",
          textColor: "text-gray-800",
        };

        return (
          <span
            key={feature}
            className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${style.bgColor} ${style.textColor}`}
          >
            {style.icon}
            {feature}
          </span>
        );
      })}
    </div>
  );
};

/**
 * 检查模型是否支持特定功能，并可选渲染标签
 */
interface CheckFeatureProps {
  model: AiModelResponse;
  feature: AIModelTagsConstant;
  children?: React.ReactNode;
  renderTag?: boolean;
  className?: string;
}

export const FeatureCheck: React.FC<CheckFeatureProps> = ({
  model,
  feature,
  children,
  renderTag = false,
  className = "",
}) => {
  // 检查模型是否支持此功能
  const isSupported = (model.tags & feature) === feature;

  // 如果不支持，不渲染任何内容
  if (!isSupported) {
    return null;
  }

  // 如果需要渲染标签并且支持此功能
  if (renderTag) {
    // 获取对应的标签名
    const featureLabels: Record<AIModelTagsConstant, string> = {
      [AIModelTagsConstant.DEEP_THINKING]: "深度思考",
      [AIModelTagsConstant.TEXT_CONVERSATION]: "文本对话",
      [AIModelTagsConstant.NETWORK]: "联网",
      [AIModelTagsConstant.MULTI_MODAL]: "多模态",
      [AIModelTagsConstant.IMAGE_ANALYSIS]: "图像分析",
      [AIModelTagsConstant.IMAGE_GENERATION]: "图片生成",
      [AIModelTagsConstant.FILE_ANALYSIS]: "文件分析",
    };

    const featureName = featureLabels[feature];
    const style = tagStyles[featureName] || {
      bgColor: "bg-gray-100",
      textColor: "text-gray-800",
    };

    return (
      <span
        className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${style.bgColor} ${style.textColor} ${className}`}
      >
        {style.icon}
        {featureName}
      </span>
    );
  }

  // 只渲染子内容
  return <>{children}</>;
};

export default ModelFeatureTags;
